<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>编辑送货地址</p>
    </header>
    <!-- 表单部分 -->
    <ul class="form-box">
      <li>
        <div class="title">
          联系人：
        </div>
        <div class="content">
          <input type="text" v-model="deliveryAddress.contactName" placeholder="联系人
 姓名">
        </div>
      </li>
      <li>
        <div class="title">
          性别：
        </div>
        <div class="content" style="font-size: 3vw;">
          <input type="radio" v-model="deliveryAddress.contactSex" value="1" style="width:6vw;height:3.2vw;" checked>男
          <input type="radio" v-model="deliveryAddress.contactSex" value="0" style="width:6vw;height:3.2vw;">女
        </div>
      </li>
      <li>
        <div class="title">
          电话：
        </div>
        <div class="content">
          <input type="tel" v-model="deliveryAddress.contactTel" placeholder="电话">
        </div>
      </li>
      <li>
        <div class="title">
          收货地址：
        </div>
        <div class="content">
          <input type="text" v-model="deliveryAddress.address" placeholder="收货地址">
        </div>
      </li>
    </ul>
    <div class="button-add">
      <button @click="editUserAddress">更新</button>
    </div>
    <!-- 底部导航 -->
    <footer class="bottom-nav">
      <div class="nav-item" :class="{ active: $route.path === '/index' }" @click="$router.push('/index')">
        <i class="fa fa-home"></i>
        <span>首页</span>
      </div>
      <div class="nav-item">
        <i class="fa fa-compass"></i>
        <span>商家</span>
      </div>
      <div class="nav-item" :class="{ active: $route.path === '/orderList' }" @click="$router.push('/orderList')">
        <i class="far fa-file-alt"></i>
        <span>订单</span>
      </div>
      <div class="nav-item" :class="{ active: $route.path === '/userProfile' }" @click="$router.push('/userProfile')">
        <i class="fa fa-user"></i>
        <span>我的</span>
      </div>
    </footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';
export default {
  name: 'EditUserAddress',
  data() {
    return {
      id: this.$route.query.businessId,
      daId: this.$route.query.daId,
      user: {},
      deliveryAddress: {}
    }
  },
  created() {
    this.token = localStorage.getItem('token');

    this.$axios.get(`/user`, {
      headers: {
        'Authorization': `Bearer ${this.token}`
      }
    }).then(response => {
      this.user = response.data.data;
    }).catch(error => {
      console.error(error);
    });

    this.$axios.get(`addresses/${this.daId}`, {
      headers: {
        'Authorization': `Bearer ${this.token}`
      }
    }).then(response => {
      this.deliveryAddress = response.data.data;
    }).catch(error => {
      console.error(error);
    });
  },
  components: {
    Footer
  },
  methods: {
    editUserAddress() {
      if (this.deliveryAddress.contactName == '') {
        alert('联系人姓名不能为空！');
        return;
      }
      if (this.deliveryAddress.contactTel == '') {
        alert('联系人电话不能为空！');
        return;
      }
      if (this.deliveryAddress.address == '') {
        alert('联系人地址不能为空！');
        return;
      }

      this.$axios.put('addresses/update',
        {
          "id": this.daId,
          "address": this.deliveryAddress.address,
          "contactName": this.deliveryAddress.contactName,
          "contactSex": this.deliveryAddress.contactSex,
          "contactTel": this.deliveryAddress.contactTel
        }, {
        headers: {
          'Authorization': `Bearer ${this.token}`
        }
      }).then(response => {
        if (response.data.data != null) {
          this.$router.push({
            path: '/userAddress',
            query: {
              businessId: this.id
            }
          });
        } else {
          alert('更新地址失败！');
        }
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>
<style scoped>
/*************** 总容器 ***************/
.wrapper {
  width: 100%;
  height: 100%;
}

/*************** header ***************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  /*保证在最上层*/
  z-index: 1000;
}

/*************** （表单信息） ***************/
.wrapper .form-box {
  width: 100%;
  margin-top: 12vw;
}

.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0vw 3vw;
  display: flex;
}

.wrapper .form-box li .title {
  flex: 0 0 18vw;
  font-size: 3vw;
  font-weight: 700;
  color: #666;
}

.wrapper .form-box li .content {
  flex: 1;
  display: flex;
  align-items: center;
}

.wrapper .form-box li .content input {
  border: none;
  outline: none;
  width: 100%;
  height: 4vw;
  font-size: 3vw;
}

.wrapper .button-add {
  box-sizing: border-box;
  padding: 4vw 3vw 0vw 3vw;
}

.wrapper .button-add button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  border: none;
  outline: none;
  border-radius: 4px;
  color: #fff;
  background-color: #38CA73;
}

/* 底部导航 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16vw;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
  font-size: 3vw;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 2vw;
  border-radius: 10px;
}

.nav-item.active {
  color: #0097FF;
  transform: translateY(-3px);
}

.nav-item i {
  font-size: 5.5vw;
  margin-bottom: 1vw;
  transition: all 0.3s ease;
}

.nav-item.active i {
  transform: scale(1.2);
}

.nav-item span {
  font-size: 3vw;
  font-weight: 500;
}
</style>